<template>
	<view class="login-container">
		<u-navbar :is-back="false" :title="pageTitle" :border-bottom="false" title-size="28" title-color="#333"></u-navbar>

		<!-- login页Banner图 -->
		<image src="@/static/login/loginBac.png" class="login-banner"></image>

		<!-- login Form表单区域 -->
		<view class="formArea">
			<u-form :model="loginForm" ref="loginFormRef" label-position="top" :label-style="loginFormStyle">
				<u-form-item label="手机号" prop="phone">
					<u-input v-model="loginForm.phone" type="number" placeholder="请输入商家联系人手机号" maxlength="11" />
				</u-form-item>
				<u-form-item v-show="loginType == 'password'" label="密码" prop="password">
					<u-input v-model="loginForm.password" type="password" placeholder="请输入您的密码" />
				</u-form-item>
				<u-form-item v-show="loginType == 'code'" label="验证码" prop="code">
					<u-input v-model="loginForm.code" type="number" placeholder="请输入您的验证码" maxlength="6" />
					<template v-slot:right>
						<text @click="getCode" v-if="showGetCode" class="getCodeText">获取验证码</text>
						<u-verification-code v-show="false" :seconds="seconds" ref="uCode" @change="codeChange" change-text="x" end-text=" " start-text=" "></u-verification-code>
						<text class="getCodeText" v-if="!showGetCode">{{ tips }}后重新获取</text>
					</template>
				</u-form-item>
			</u-form>

			<!-- 验证码登录与忘记密码 -->
			<view class="funcBox">
				<text @click="changeLoginType('code')" v-if="loginType == 'password'">验证码登录</text>
				<text @click="changeLoginType('password')" v-if="loginType == 'code'">账号密码登录</text>
				<text @click="goForgetPassword" v-if="false">忘记密码</text>
			</view>

			<!-- 登录按钮 -->
			<view @click="toLogin" class="login-btn">登录</view>
		</view>
	</view>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { useUserStore } from '@/store/userStore';
import { passwordLogin, getVerificationCode, codeLogin, getUserInfo } from '@/api/login';

// 实例化用户信息store
const userStore = useUserStore();

// 页面标题
const pageTitle = ref('充电兽');

// 登录方式类型
const loginType = ref('password');

// 登录表单label样式
const loginFormStyle = ref({
	fontSize: '32rpx',
	color: '#333',
	fontWeight: '500'
});

// 登录表单
const loginForm = ref({
	phone: '18715031249', // 手机号
	password: '123456', // 密码
	code: '' // 验证码
});

// 切换登录类型
const changeLoginType = (type) => {
	nextTick(() => {
		loginForm.value.code = '';
		loginForm.value.password = '';
		loginType.value = type;
		type == 'code' ? (pageTitle.value = '验证码登录') : (pageTitle.value = '充电兽');
	});
};

// 获取验证码
const showGetCode = ref(true);
const uCode = ref(null); // 验证码倒计时组件实例
const getCode = () => {
	if (loginForm.value.phone) {
		uni.showLoading({
			title: '正在获取验证码'
		})
		getPhoneCode();
	} else {
		uni.showToast({
			title: '请输入手机号',
			icon: 'none'
		});
	}
};

// 获取验证码
const getPhoneCode = async () => {
	let res = await getVerificationCode({
		phoneNumber: loginForm.value.phone,
		sendType: '4',
	});
	uni.hideLoading();
	if (res.code == 200) {
		uCode.value.start();
		showGetCode.value = false;
		uni.showToast({
			title: '验证码已发送',
			icon: 'none'
		});
	}
};

// 验证码登录
const loginByCode = async () => {
	let res = await codeLogin({
		tel: loginForm.value.phone,
		verCode: loginForm.value.code,
		clientId: '43c2eede60722fc5e86965f646253e14',
		grantType: 'directvercode'
	});
	
	if (res.code == 200) {
		saveUserInfo(res);
	}
};

// 验证码倒计时变化
const tips = ref('');
const seconds = ref('10');
const codeChange = (text) => {
	tips.value = text;
	tips.value < 1 ? (showGetCode.value = true) : '';
};

// 登录
const toLogin = () => {
	let pass = checkForm();
	if (loginType.value == 'password' && pass) {
		loginByPassword();
	} else if (loginType.value == 'code' && pass) {
		loginByCode();
	}
};

// 账号密码登录
const loginByPassword = async () => {
	let res = await passwordLogin({
		tel: loginForm.value.phone,
		password: loginForm.value.password,
		clientId: '43c2eede60722fc5e86965f646253e14',
		grantType: 'directpass'
	});

	if (res.code == 200) {
		saveUserInfo(res);
	}
};

// 保存用户信息并跳转
const saveUserInfo = (res) => {
	userStore.setUserToken(res.data.access_token);
	userStore.setUserInfo(res.data);
	
	getUserInfoFun();
};

// 获取用户信息
const getUserInfoFun = async () => {
	let res = await getUserInfo();
	if (res.code == 200) {
		await userStore.assignUserInfo(res.data);
		uni.reLaunch({
			url: '/subPages/home/index'
		});
	}
};

// 校验表单
const checkForm = () => {
	if (loginType.value == 'password') {
		if (!loginForm.value.phone) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return false;
		}
		if (!loginForm.value.password) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none'
			});
			return false;
		}
		return true;
	} else if (loginType.value == 'code') {
		if (!loginForm.value.phone) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return false;
		}
		if (!loginForm.value.code) {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none'
			});
			return false;
		}
		return true;
	}
};

// 跳转到忘记密码页面
const goForgetPassword = () => {
	uni.navigateTo({
		url: `/subPages/forgetPassword/index?pageType=forget`
	});
};
</script>

<style lang="scss" scoped>
.login-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;

	.login-banner {
		width: 100%;
		height: 486rpx;
	}

	.formArea {
		flex: 1;
		position: relative;
		bottom: 64rpx;
		border-radius: 48rpx 48rpx 0 0;
		padding: 32px 24px 0;
		background-color: #fff;

		.funcBox {
			font-size: 28rpx;
			margin-top: 32rpx;
			color: $uni-main-color;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
		}

		.login-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			width: 654rpx;
			height: 104rpx;
			font-size: 32rpx;
			font-weight: 500;
			border-radius: 80rpx;
			margin-top: 128rpx;
			background: linear-gradient(90deg, #3ed979 0%, #00c582 100%);
		}

		.getCodeText {
			color: $uni-main-color;
			font-size: 28rpx;
		}
	}
}
</style>
